﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    

    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/themes/" + ((Session["theme"] == null) ? "black-tie" : Session["theme"].ToString()) + "/css")
    @Styles.Render("~/Content/css")



   

   
</head>

<body style="margin-left: 0; margin-top: -10px">
     @Scripts.Render("~/bundles/jquery")
    <script type="text/ecmascript" src="~/Scripts/jquery-migrate-1.2.1.min.js"></script>

    @Scripts.Render("~/bundles/jqueryui")
    @*this line commented by sameh just for testing the win 8 them color*@
    @*  <script type="text/javascript" src="~/Scripts/jquery.ui.themeswitcher.js"></script>*@
    @Scripts.Render("~/bundles/modernizr")

    <script type="text/javascript" src="~/Scripts/jquery.timepicker.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="~/Content/themes/jMetro/Metroloading.js"></script>
    <script type="text/javascript">
        // debugger;
        var image_url = "/Content/themes/jMetro/images/animated_loader.gif";

        var imageLoad = $('<img />').load(function () {

            $(this).show();

        }).attr('src', image_url).hide();
    </script>
    <div id="Win8loader" class="win8loading" style="background-color: black;">
        <div id="dvloading" style="display: none;" class="loading two"></div>
        <div id="imgloading">
            @*<img src="~/Content/themes/jMetro/images/animated_loader.gif" alt="" />*@
        </div>
        <span>Please Wait...</span>
        <script type="text/javascript">
            $('#imgloading').append(imageLoad);
        </script>
    </div>
    <script type="text/javascript">
        function ShowLoading() {
            $('#Win8loader').removeClass();//.addClass('win8loadingDeactivate');
            $('#Win8loader').addClass('win8loading');
            //$('.loading').loadingDots();
            //$('.loading').showLoadingDots();
        }
        function HideLoading() {
            $('#Win8loader').removeClass();//.addClass('win8loadingDeactivate');
            $('#Win8loader').addClass('win8loadingDeactivate');
        }

        $(window).load(function () {
            HideLoading();
        });




        //$('body').loadingDots({ destination: '#dvloading' }); $('body').showLoadingDots();

    </script>

    <div class="ProjectName">
        <div>
            <span>TCM</span>
        </div>
    </div>
    <div id="theme-switcher"></div>
    <div>
        @*<div style="width: 200px; float: left; margin-top: 7px; margin-left: 20px">
            <span style="width: 100px; font-size: 140%; color: #fff; font-family: Arial; font-weight: bold; margin-right: 10px; text-decoration: none">T C M Logo</span>
        </div>*@
        <div id="spinner" class="spinner" style="display: none;">
            <img id="img-spinner" src="~/Content/images/ajax-loader.gif" alt="Loading" />
        </div>

        @*  <div style="float: right;">
            <img style='background-position: -126px -2px; width: 17px; height: 17px; background-image: url("/content/themes/base/images/command2.png");' class="is_img" alt="Options" src="/content/themes/base/images/invis.gif">
            <span style="color: #fff">Samy Roshdy</span>
            <img src="/Content/themes/base/images/image_profile.jpg" style="width: 17px; height: 17px;" />
        </div>*@
    </div>
    <div class="dvMainContent">
        @*<div class="dvNavigation">
            <div>
                <div style="border: 1px solid #333333; margin-left: 10px; margin-top: 10px; margin-right: 10px; height: 30px; background-color: rgb(255, 255, 255)">
                    <input style="width: 75%; height: 65%; border: 0px; color: #999999;" type="text" value="Search Courses" onclick="this.value = ''" onblur="if(this.value=='')this.value='Search Courses'" />
                    <img style="border: 0px; cursor: pointer; float: right; width: 18px; margin-top: 5px; margin-right: 5px" title="Search" src="/content/themes/base/images/search_button_icon.jpg">
                </div>
                <div id="DivSeparator"></div>

                <ul id="tcmMenu" style="height: 600px">
                    <li><a  href="@Url.Action("index", "Home")">Master Data</a></li>
                    <li><a  href="@Url.Action("index", "Course")">Courses</a></li>
                    <li><a  href="@Url.Action("index", "Expense")">Expense</a></li>
                    <li><a  href="@Url.Action("index", "Reports")">Reports</a></li>
                </ul>
            </div>

        </div>*@

        
        <div class="CenterContent">
            @RenderBody()
        </div>
    </div>


     @RenderSection("scripts", required: false)
    <script type="text/javascript">
        $(function () {
            /* Buttons*/
            $(":button").button();
            $(":submit").button();
            $(".tcmButton").button();
            $("a:contains('Create New') ").button();
            $(function () {
                $(".GridEdit").button({
                    icons: {
                        primary: "ui-icon-pencil"
                    }
                });
                $(".GridDetails").button({
                    icons: {
                        primary: "ui-icon-script"
                    }
                });
                $(".GridDelete").button({
                    icons: {
                        primary: "ui-icon-trash"
                    }
                });
            });


            //Grid
            $("#tcmMenu").menu();
            var myTable = jQuery(".DataGrid");
            var thead = myTable.find("thead");
            var thRows = myTable.find("tr:has(th)");

            if (thead.length === 0) {  //if there is no thead element, add one.
                thead = jQuery("<thead></thead>").appendTo(myTable);
            }
            myTable.find("tr th:not([width])").each(function () {
                $(this).attr("width", "100");

            });
            var copy = thRows.clone(true).appendTo("thead");
            thRows.remove();

            $('.DataGrid').flexigrid({
                showTableToggleBtn: true,
                //usepager: true,
                colResize: !$('.DataGrid').hasClass("fixed")//to disable column resizing on some Grids (add css class fixed)
            });


            /// DataTable JS
            $(".grdTable").dataTable({
                "aaSorting": [[1, "desc"]]
            });

            $(".ui-button").hover(function () {
                $(this).addClass("ui-state-hover");
            }, function () {
                $(this).removeClass("ui-state-hover");
            });

            var flexigrid = $('.DataGrid.fixed').parent().parent();
            flexigrid.find(".nBtn").hide();
            flexigrid.find(".hDivBox").css({ width: '100%' });
            flexigrid.find(".hDivBox table").css({ width: '100%' });


            //Theme Switcher 

            if ($('#theme-switcher').themeswitcher != null) {//this line added by sameh
                var t = $('#theme-switcher').themeswitcher({
                    isThemable: true,
                    themes: {
                        'My Theme': {
                            icon: 'css/mytheme/mytheme.png',
                            css: 'css/mytheme/jquery-ui-1.8.9.custom.css'
                        }
                    },
                    loadTheme: 'base',
                    selectOnStart: false,
                    imageLocation: "css/images/",
                    onSelect: function (evt, obj) { $('#eventLog').append('&lt;br/&gt;onSelect() fired: ' + obj.themeName) },
                    onOpen: function (evt, obj) { $('#eventLog').append('&lt;br/&gt;onOpen() fired: ' + obj.themeName) },
                    onClose: function (evt, obj) { $('#eventLog').append('&lt;br/&gt;onClose() fired: ' + obj.themeName) }
                });
            }
            $('code').attr('contenteditable', 'true');







        });

        //For Test
        $(window).bind('resize', function () {
            // alert('s');
        });

        //Loading Image 
        $(window).bind("load", function () {
            $('#spinner').fadeOut(2000);
        });

        $('.submit').click(function () {
            //$('#spinner').show();
        });

        $("#spinner").bind("ajaxSend", function () {
            $(this).show();
            ShowLoading();
        }).bind("ajaxStop", function () {
            $(this).hide();
            HideLoading();
        }).bind("ajaxError", function () {
            $(this).hide();
            HideLoading();
        });


        //Tabs
        $(".tab").tabs().removeClass("ui-widget-content").addClass("ui-tabs-vertical ui-helper-clearfix");//.addClass("ui-tabs-vertical ui-helper-clearfix");
        $(".tab ul").removeClass("ui-widget-header");
        $(".tab li").removeClass("ui-corner-top");
        $(".tab li a").click(function () {
            changeMenu(this.id);
            //$('#spinner').show();
        });

        $(".tab li").each(function () {
            $(this).css("border", "0px");
            $(this).css("width", "250px");
        });
        // $(".tab").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");


        //Date Picker
        $('.datepicker').datepicker({
            showOn: "button",
            buttonImage: "/content/themes/base/images/calendar.png",
            buttonImageOnly: true,
            dateFormat: "dd/mm/yy"
        });


    </script>



</body>
</html>
